<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2830866" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b9;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xe8b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe680;</span>
                <div class="name">通过</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">闹钟</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">闹钟</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">3.1购物车</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">3.1-扫码</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">jycxun</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">next</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">pre</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">ssuo</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">xla</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">zdgli</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">火箭</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77b;</span>
                <div class="name">耳机</div>
                <div class="code-name">&amp;#xe77b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe887;</span>
                <div class="name">QQ-circle-fill</div>
                <div class="code-name">&amp;#xe887;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">礼物礼品</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">二维码</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73b;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe73b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73c;</span>
                <div class="name">微博</div>
                <div class="code-name">&amp;#xe73c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">二维码</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">眼睛_开</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cf;</span>
                <div class="name">眼睛1</div>
                <div class="code-name">&amp;#xe6cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">支付宝</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">QQ</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot?t=1632793719960'); /* IE9 */
  src: url('iconfont.eot?t=1632793719960#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1632793719960') format('woff'),
       url('iconfont.ttf?t=1632793719960') format('truetype'),
       url('iconfont.svg?t=1632793719960#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.icon-shoucang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tongguo"></span>
            <div class="name">
              通过
            </div>
            <div class="code-name">.icon-tongguo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-naozhong1"></span>
            <div class="name">
              闹钟
            </div>
            <div class="code-name">.icon-naozhong1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-naozhong"></span>
            <div class="name">
              闹钟
            </div>
            <div class="code-name">.icon-naozhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-31gouwuche"></span>
            <div class="name">
              3.1购物车
            </div>
            <div class="code-name">.icon-31gouwuche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-31saoma"></span>
            <div class="name">
              3.1-扫码
            </div>
            <div class="code-name">.icon-31saoma
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jycxun"></span>
            <div class="name">
              jycxun
            </div>
            <div class="code-name">.icon-jycxun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-next"></span>
            <div class="name">
              next
            </div>
            <div class="code-name">.icon-next
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pre"></span>
            <div class="name">
              pre
            </div>
            <div class="code-name">.icon-pre
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ssuo"></span>
            <div class="name">
              ssuo
            </div>
            <div class="code-name">.icon-ssuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xla"></span>
            <div class="name">
              xla
            </div>
            <div class="code-name">.icon-xla
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zdgli"></span>
            <div class="name">
              zdgli
            </div>
            <div class="code-name">.icon-zdgli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huojian"></span>
            <div class="name">
              火箭
            </div>
            <div class="code-name">.icon-huojian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-erji"></span>
            <div class="name">
              耳机
            </div>
            <div class="code-name">.icon-erji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-QQ-circle-fill"></span>
            <div class="name">
              QQ-circle-fill
            </div>
            <div class="code-name">.icon-QQ-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liwulipin"></span>
            <div class="name">
              礼物礼品
            </div>
            <div class="code-name">.icon-liwulipin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-erweima"></span>
            <div class="name">
              二维码
            </div>
            <div class="code-name">.icon-erweima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weixin"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.icon-weixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weibo"></span>
            <div class="name">
              微博
            </div>
            <div class="code-name">.icon-weibo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ico"></span>
            <div class="name">
              二维码
            </div>
            <div class="code-name">.icon-ico
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yanjing_kai"></span>
            <div class="name">
              眼睛_开
            </div>
            <div class="code-name">.icon-yanjing_kai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yanjing"></span>
            <div class="name">
              眼睛1
            </div>
            <div class="code-name">.icon-yanjing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhifubao"></span>
            <div class="name">
              支付宝
            </div>
            <div class="code-name">.icon-zhifubao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-QQ1"></span>
            <div class="name">
              QQ
            </div>
            <div class="code-name">.icon-QQ1
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#icon-shoucang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tongguo"></use>
                </svg>
                <div class="name">通过</div>
                <div class="code-name">#icon-tongguo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-naozhong1"></use>
                </svg>
                <div class="name">闹钟</div>
                <div class="code-name">#icon-naozhong1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-naozhong"></use>
                </svg>
                <div class="name">闹钟</div>
                <div class="code-name">#icon-naozhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-31gouwuche"></use>
                </svg>
                <div class="name">3.1购物车</div>
                <div class="code-name">#icon-31gouwuche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-31saoma"></use>
                </svg>
                <div class="name">3.1-扫码</div>
                <div class="code-name">#icon-31saoma</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jycxun"></use>
                </svg>
                <div class="name">jycxun</div>
                <div class="code-name">#icon-jycxun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-next"></use>
                </svg>
                <div class="name">next</div>
                <div class="code-name">#icon-next</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pre"></use>
                </svg>
                <div class="name">pre</div>
                <div class="code-name">#icon-pre</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ssuo"></use>
                </svg>
                <div class="name">ssuo</div>
                <div class="code-name">#icon-ssuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xla"></use>
                </svg>
                <div class="name">xla</div>
                <div class="code-name">#icon-xla</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zdgli"></use>
                </svg>
                <div class="name">zdgli</div>
                <div class="code-name">#icon-zdgli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huojian"></use>
                </svg>
                <div class="name">火箭</div>
                <div class="code-name">#icon-huojian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-erji"></use>
                </svg>
                <div class="name">耳机</div>
                <div class="code-name">#icon-erji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-QQ-circle-fill"></use>
                </svg>
                <div class="name">QQ-circle-fill</div>
                <div class="code-name">#icon-QQ-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liwulipin"></use>
                </svg>
                <div class="name">礼物礼品</div>
                <div class="code-name">#icon-liwulipin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-erweima"></use>
                </svg>
                <div class="name">二维码</div>
                <div class="code-name">#icon-erweima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixin"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#icon-weixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weibo"></use>
                </svg>
                <div class="name">微博</div>
                <div class="code-name">#icon-weibo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ico"></use>
                </svg>
                <div class="name">二维码</div>
                <div class="code-name">#icon-ico</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yanjing_kai"></use>
                </svg>
                <div class="name">眼睛_开</div>
                <div class="code-name">#icon-yanjing_kai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yanjing"></use>
                </svg>
                <div class="name">眼睛1</div>
                <div class="code-name">#icon-yanjing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhifubao"></use>
                </svg>
                <div class="name">支付宝</div>
                <div class="code-name">#icon-zhifubao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-QQ1"></use>
                </svg>
                <div class="name">QQ</div>
                <div class="code-name">#icon-QQ1</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
